<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>登录界面</title>
    <style type="text/css">
        body {
            font-family: 楷体;
            font-size: 20px;
            background-color: #1b6d85;
        }

        h1 {
            float: left;
            padding-left: 10%;
            color: #fff;
            font-size: 50px;
            font-family:"STXingkai";
        }

        table {
            position: absolute;
            left: 55%;
            padding: 4% 4% 6% 3%;
            margin-right: 10%;
            margin-top: 0%;
            color: #fff;
            border-collapse: separate;
            border-spacing: 10px 20px;
        }

        .text {
            position: relative;
        }

        .form-control {
            width: 200px;
            padding: 7px 0px;
            color: #fff;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
        }

        .form-control:focus {
            border-color: rgba(59, 137, 245, 0.5);
            outline: 0;
        }

        .box {
            background: rgba(0, 0, 1, .7);
            box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
            border-radius: 10px;
        }

        .submit {
            width: 80%;
            height: 50px;
            background-color: #3B89F5;
            border: none;
            font-size: 18px;
            color: #fff;
            border-radius: 8px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
        }

    </style>
    <!--判断是否为空-->
    <script type="text/javascript">
            function login(form){
                if(form.username.value == ""){
                    alert("用户不能为空！");
                    return false;
                }
                if(form.password.value == ""){
                    alert("密码不能为空！");
                    return false;
                }
            }
        </script>
</head>
<body>
<h1>学生消费系统</h1>
<form action="/LoginServlet" method="post" onSubmit="return login(this);">
    <table align="right" class="box">

        <tr>
            <td style="font-size: 30px;">登录界面</td>
            <td style="font-size: 13px;" align="right">没有账号?
                <h2>
                    <a title="快速注册" href="/regist.jsp" class="Hyperlink">注册</a>
                </h2>
            </td>
        </tr>
        <tr>
            <td class="text" align="center"><p>用户：</p></td>
            <td><input class="form-control form-input a" type="text"
                       title="请输入用户名" name="username" value=""></td>
        </tr>

        <tr>
            <td class="text" align="center" valign="bottom"><p>密码：</p></td>
            <td><input class="form-control form-input b" type="password"
                       title="请输入密码" name="password" value=""></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><p></p> <input class="submit" type="submit" value="登录">
                <h3 style="color: red">${requestScope.msg}</h3></td>
        </tr>

    </table>
</form>
</body>

</html>


